<template>
  <div>
    <el-input
      v-model="input"
      placeholder="请输入查询参数"
      class="searchInput"
    ></el-input>
    <el-button
      icon="el-icon-search"
      style="font-size: 16px;"
      @click="handleSearch"
    ></el-button>
    <el-button
      class="addButton"
      @click="handleEdit"
      icon="el-icon-circle-plus"
    ></el-button>
    <el-button
      class="delButton"
      v-if="multipleSelectionFlag"
      @click="batchRemove"
      icon="el-icon-delete"
    >
    </el-button>
    <el-table
      ref="memberLevelTable"
      :data="memberLevel"
      :stripe="true"
      :highlight-current-row="true"
      @selection-change="handleSelectionChange"
      tooltip-effect="dark"
      class="table"
    >
      <el-table-column type="selection">
      </el-table-column>
      <el-table-column label="id">
        <template slot-scope="scope">{{ scope.row.id }}</template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="等级名称"
      >
      </el-table-column>
      <el-table-column
        prop="growthPoint"
        label="需成长值"
      >
      </el-table-column>
      <el-table-column
        prop="defaultStatus"
        label="默认等级"
      >
        <template slot-scope="scope">
          <i
            class="el-icon-success"
            v-if="scope.row.defaultStatus==1"
          ></i>
          <i
            class="el-icon-error"
            v-else
          ></i>
        </template>
      </el-table-column>
      <el-table-column
        prop="freeFreightPoint"
        label="免运标准"
      >
      </el-table-column>
      <el-table-column
        prop="commentGrowthPoint"
        label="评价成长值"
      >
      </el-table-column>
      <el-table-column
        label="特权"
        align="center"
      >
        <el-table-column
          prop="priviledgeFreeFreight"
          label="免邮"
        >
          <template slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.priviledgeFreeFreight==1"
            ></i>
            <i
              class="el-icon-error"
              v-else
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="priviledgeMemberPrice"
          label="价格"
        >
          <template slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.priviledgeMemberPrice==1"
            ></i>
            <i
              class="el-icon-error"
              v-else
            ></i>
          </template>
        </el-table-column>
        <el-table-column
          prop="priviledgeBirthday"
          label="生日"
        >
          <template slot-scope="scope">
            <i
              class="el-icon-success"
              v-if="scope.row.priviledgeBirthday==1"
            ></i>
            <i
              class="el-icon-error"
              v-else
            ></i>
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="note"
        label="备注"
      >
      </el-table-column>
      <el-table-column
        prop="address"
        label="操作"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)"
          ><i class="el-icon-edit"></i></el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)"
          ><i class="el-icon-delete"></i></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 弹窗, 新增 / 修改 -->
    <add-or-update
      v-if="addOrUpdateShow"
      ref="addOrUpdate"
      @refreshDataList="getDataList"
    ></add-or-update>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :page-sizes="[10, 20, 40, 80]"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="total, sizes, prev, pager, next, jumper"
    >
    </el-pagination>
  </div>
</template>
<script>
import addOrUpdate from './memberlevel-add-or-update.vue'
export default {
  data () {
    return {
      input: '',
      multipleSelectionFlag: false,
      multipleSelection: [],
      memberLevel: [],
      currentPage: 1,
      pageSize: 10,
      total: 0,
      addOrUpdateShow: false
    }
  },
  methods: {
    getDataList () {
      this.getPageMemberLevel(this.pageSize, this.currentPage)
    },
    handleSearch () {
      this.getPageMemberLevel(this.pageSize, this.currentPage, this.input)
    },
    handleEdit (index, row) {
      this.addOrUpdateShow = true
      this.$nextTick(() => {
        this.$refs.addOrUpdate.init(index, row)
      })
    },
    handleDelete (index, row) {
      let ids = [row.id]
      let name = row.name
      this.remove(ids, name)
    },
    batchRemove () {
      let ids = []
      let name = []
      this.multipleSelection.forEach(item => {
        ids.push(item.id)
        name.push(item.name)
      })
      this.remove(ids, name)
    },
    remove (ids, name) {
      this.$confirm(`删除【${name}】会员等级, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$http({
          url: this.$http.adornUrl('/member/memberlevel/delete'),
          method: 'post',
          data: this.$http.adornData(ids, false)
        }).then((data) => {
          if (data.data.code === 500) {
            this.$message({
              type: 'error',
              message: '删除失败'
            })
          } else {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
          }

          this.getPageMemberLevel(this.pageSize, this.currentPage)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    handleSelectionChange (val) {
      this.multipleSelectionFlag = true
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
        this.multipleSelectionFlag = false
      }
    },
    handleSizeChange (size) {
      this.pageSize = size
      this.getPageMemberLevel(this.pageSize, this.currentPage, this.input)
    },
    handleCurrentChange (currentPage) {
      this.currentPage = currentPage
      this.getPageMemberLevel(this.pageSize, this.currentPage, this.input)
    },
    getPageMemberLevel (size, page, input) {
      this.$http({
        url: this.$http.adornUrl('/member/memberlevel/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: page,
          limit: size,
          input: input
        })
      }).then(({
        data
      }) => {
        this.total = data.data.totalCount
        this.memberLevel = data.data.list
      })
    }
  },
  created () {
    this.getPageMemberLevel(this.pageSize, this.currentPage)
  },
  components: {
    addOrUpdate
  }
}
</script>
<style>
.searchInput {
  width: 15%;
  margin-right: 10px;
}

.addButton {
  background: #25c6a2;
  color: #fff;
  font-size: 16px;
}

.delButton {
  background: #f4b1b6;
  color: #fff;
  font-size: 16px;
}

.table {
  width: 100%;
  margin-top: 15px;
}
</style>